<template>
  <el-menu router :collapse-transition="false" background-color="#001529"
           text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none"
           :default-active="$route.path">
    <el-menu-item index="/home">
      <i class="el-icon-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/person" v-if="loginUser">
      <i class="el-icon-user-solid"></i>
      <span slot="title">个人信息</span>
    </el-menu-item>
    <el-menu-item index="/device" v-if="loginUser.role!=='业主'">
      <i class="el-icon-miehuoqi"></i>
      <span slot="title">消防设备</span>
    </el-menu-item>
    <el-menu-item index="/user" v-if="loginUser.role==='管理员'">
      <i class="el-icon-duoyonghu-tianchong"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
    <el-submenu index="buildings" v-if="loginUser.role==='管理员'">
      <template slot="title">
        <i class="el-icon-office-building"></i>
        <span>建筑管理</span>
      </template>
      <el-menu-item index="/building"><i class="el-icon-louzuo"></i>楼栋管理</el-menu-item>
      <el-menu-item index="/floor"><i class="el-icon-louceng"></i>楼层管理</el-menu-item>
      <el-menu-item index="/house"><i class="el-icon-men"></i>房屋管理</el-menu-item>
    </el-submenu>
    <el-submenu index="inspect" v-if="loginUser.role==='管理员'">
      <template slot="title">
        <i class="el-icon-edit-outline"></i>
        <span>安全检查</span>
      </template>
      <el-menu-item index="/inspection"><i class="el-icon-document"></i>安全检查记录</el-menu-item>
      <el-menu-item index="/inspector"><i class="el-icon-jiluyuan"></i>安全检查员</el-menu-item>
    </el-submenu>
    <el-menu-item index="/owner" v-if="loginUser.role==='管理员'">
      <i class="el-icon-yezhuguanli"></i>
      <span slot="title">业主管理</span>
    </el-menu-item>
    <el-menu-item index="/noticeManage" v-if="loginUser.role==='管理员'">
      <i class="el-icon-gonggao"></i>
      <span slot="title">公告管理</span>
    </el-menu-item>
    <el-menu-item index="/houseBasicInfo" v-if="loginUser.role==='业主'">
      <i class="el-icon-jibenxinxi"></i>
      <span slot="title">房屋基本信息</span>
    </el-menu-item>
    <el-menu-item index="/houseSafetyStatus" v-if="loginUser.role==='业主'">
      <i class="el-icon-anquan"></i>
      <span slot="title">房屋安全状况</span>
    </el-menu-item>
    <el-menu-item index="/ownerDevice" v-if="loginUser.role==='业主'">
      <i class="el-icon-miehuoqi"></i>
      <span slot="title">消防设备</span>
    </el-menu-item>
    <el-menu-item index="/responsibleFor" v-if="loginUser.role==='安全检查员'">
      <i class="el-icon-louzuo"></i>
      <span slot="title">负责对象</span>
    </el-menu-item>
    <el-menu-item index="/record" v-if="loginUser.role!=='管理员'">
      <i class="el-icon-document"></i>
      <span slot="title">检查记录</span>
    </el-menu-item>
    <el-menu-item index="/analysis" v-if="loginUser.role==='安全检查员'">
      <i class="el-icon-tongji"></i>
      <span slot="title">统计分析</span>
    </el-menu-item>
    <!--          <el-menu-item index="/notice" v-if="loginUser.role!=='管理员'">-->
    <!--            <i class="el-icon-gonggao"></i>-->
    <!--            <span slot="title">消防设备情况</span>-->
    <!--          </el-menu-item>-->
    <el-menu-item index="/message">
      <i class="el-icon-message-solid"></i>
      <span slot="title">我的消息</span>
    </el-menu-item>
    <el-menu-item index="/notice">
      <i class="el-icon-gonggao"></i>
      <span slot="title">公告</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "FiresafeMenu",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem('user')) || {},
    }
  }
}
</script>

<style scoped>
/*当前选中点亮的框需要左右的margin，但是把icon和文字往右边挤了，所以需要把padding-left减少*/

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 30px !important;
}

.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu-item:hover, .el-menu-item:hover i, .el-submenu__title:hover, .el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #c41335 !important;
  border-radius: 5px;
}

.el-menu.el-menu--inline .el-menu-item.is-active {
  padding-left: 30px !important;
}

/deep/ .el-tooltip {
  padding-left: 16px !important;
}

/deep/ .el-submenu__title, .el-menu-item {
  display: flex;
  align-items: center;
  height: 40px !important;
  line-height: 40px !important;
  padding-left: 16px !important;
  margin: 0 4px;
}

.el-submenu__icon-arrow {
  margin-top: -3px !important;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

</style>
